import React from 'react';
import { AlmanacData } from '../types/almanac';

interface DayInformationProps {
  date: Date;
  almanacData: AlmanacData | null;
  isLoading: boolean;
}

export function DayInformation({ date, almanacData, isLoading }: DayInformationProps) {
  if (isLoading) {
    return (
      <div className="mt-4 bg-white rounded-lg shadow p-4">
        <h3 className="text-lg font-semibold mb-2">日期信息</h3>
        <div className="animate-pulse space-y-2">
          <div className="h-4 bg-gray-200 rounded w-3/4"></div>
          <div className="h-4 bg-gray-200 rounded w-1/2"></div>
        </div>
      </div>
    );
  }

  if (!almanacData) {
    return (
      <div className="mt-4 bg-white rounded-lg shadow p-4">
        <h3 className="text-lg font-semibold mb-2">日期信息</h3>
        <p className="text-gray-500">加载失败</p>
      </div>
    );
  }

  return (
    <div className="mt-4 bg-white rounded-lg shadow p-4">
      <h3 className="text-lg font-semibold mb-4">日期信息</h3>
      
      <div className="space-y-4">
        <div>
          <h4 className="font-medium text-gray-700 mb-2">节日</h4>
          <p className="text-gray-600">{almanacData.GJie || '无'}</p>
        </div>
        <div>
          <h4 className="font-medium text-gray-700 mb-2">阴历</h4>
          <p className="text-gray-600">{almanacData.LMonth}{almanacData.LDay}</p>
        </div>

        <div>
          <h4 className="font-medium text-gray-700 mb-2">宜</h4>
          <p className="text-green-600">{almanacData.Yi}</p>
        </div>

        <div>
          <h4 className="font-medium text-gray-700 mb-2">忌</h4>
          <p className="text-red-600">{almanacData.Ji}</p>
        </div>

        <div>
          <h4 className="font-medium text-gray-700 mb-2">运势</h4>
          <div className="space-y-1 text-sm text-gray-600">
            <p>神位: {almanacData.ShenWei}</p>
            <p>冲煞: {almanacData.Chong}</p>
            <p>星宿: {almanacData.XingEast}</p>
            <p>运神: {almanacData.Taishen}</p>
          </div>
        </div>
      </div>
    </div>
  );
}